<template>
	<view class="recordDetail">
		<nav-bars title="核销记录明细"></nav-bars>
		<view class="topItem">
			<view class="item">
				<view class="top">
					<image src="../../../static/common/avator.png" mode=""></image>
					<view class="info">
						<view class="tit">500元现金补贴</view>
						<view class="price">在联坤家居商城购物满1888元即可抵扣</view>
						<view class="time">有效期：2021.10.30-2021.11.11</view>
					</view>
				</view>
				<view class="bottom">
					<view class="num">已核销：<text>20张</text></view>
					<!-- <view class="detail">记录详情<text class="iconfont icon-jinru"></text></view> -->
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="bottom">
					<view class="num">订单号：<text>12345678</text></view>
					<view class="detail">2021.11.11 13:25</view>
				</view>
				<view class="top">
					<image src="../../../static/common/avator.png" mode=""></image>
					<view class="info">
						<view class="tit">500元现金补贴</view>
						<view class="price">在联坤家居商城购物满1888元即可抵扣</view>
						<view class="time">有效期：2021.10.30-2021.11.11</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.recordDetail{
		.topItem{
			width: 100%;
			background-color: #fff;
			padding: 32rpx;
			.item{
				background-color: #fff;
				box-shadow: 0rpx 2rpx 14rpx 0rpx #F5F5F5;
				border-radius: 16rpx;
				padding: 37rpx 24rpx 27rpx 28rpx;
				margin: 24rpx 0;
				.top{
					display: flex;
					border-bottom: 2rpx solid #EFEFEF;
					image{
						width: 84rpx;
						height: 84rpx;
						flex-shrink: 0;
						margin-right: 33rpx;
					}
					.info{
						padding-bottom: 24rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.tit{
							font: bold 30rpx/30rpx PingFang SC;
							color: #181E1F;
						}
						.price{
							font: 500 24rpx/24rpx PingFang SC;
							color: #272C2D;
							margin: 15rpx 0 18rpx 0;
						}
						.time{
							font: 500 24rpx/24rpx PingFang SC;
							color: #878A8A;
						}
					}
				}
				.bottom{
					display: flex;
					margin-top: 24rpx;
					// justify-content: space-between;
					.num{
						font: 500 24rpx/24rpx PingFang SC;
						color: #878A8A;
						text{
							color: #181E1F;
						}
					}
					.detail{
						font: 500 24rpx/24rpx PingFang SC;
						color: #CB9436;
						.iconfont{
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.list{
			padding: 0 32rpx;
			.item{
				background-color: #fff;
				box-shadow: 0rpx 2rpx 14rpx 0rpx #F5F5F5;
				border-radius: 16rpx;
				padding: 37rpx 24rpx 27rpx 28rpx;
				margin: 32rpx 0;
				.top{
					display: flex;
					padding-top: 24rpx;
					border-top: 2rpx solid #EFEFEF;
					image{
						width: 84rpx;
						height: 84rpx;
						flex-shrink: 0;
						margin-right: 33rpx;
					}
					.info{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.tit{
							font: bold 30rpx/30rpx PingFang SC;
							color: #181E1F;
						}
						.price{
							font: 500 24rpx/24rpx PingFang SC;
							color: #272C2D;
							margin: 15rpx 0 18rpx 0;
						}
						.time{
							font: 500 24rpx/24rpx PingFang SC;
							color: #878A8A;
						}
					}
				}
				.bottom{
					display: flex;
					margin-bottom: 24rpx;
					justify-content: space-between;
					.num{
						font: 500 24rpx/24rpx PingFang SC;
						color: #878A8A;
						text{
							color: #CB9436;
						}
					}
					.detail{
						font: 500 24rpx/24rpx PingFang SC;
						color: #878A8A;
					}
				}
			}
		}
	}
</style>
